<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>esd管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <link rel="stylesheet" href="/backend/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/backend/styles/list.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header" style="height: 30px">
        <h1>报表统计</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>报表统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-row>
                <el-col :span="24">
                    <div class="filter-container">
                        生产线：
                        <el-select v-model="searchObj.line" placeholder="请选择" style="width: 150px">
                            <el-option
                                    v-for="item in lines"
                                    :key="item.lineName"
                                    :label="item.lineName"
                                    :value="item.lineId">
                            </el-option>
                        </el-select>
                        开始时间段:
                        <el-date-picker
                                v-model="searchObj.timeScale"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                align="right">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" @click="searchData()">查询</el-button>
                        <el-button type="success" icon="el-icon-download" @click="exportData()">导出Excel报表</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="chart-container" style="width: 70vw; margin-top: 0.8vh;">
                <template v-if="resultData!=null">
                    <el-descriptions
                        :border="true"
                        :column="2">
                        <el-descriptions-item label="日期">
                            {{resultData.timeStr}}
                        </el-descriptions-item>
                        <el-descriptions-item label="生产线">
                            {{resultData.line}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <h2>各类终端通道统计</h2>
                    <el-descriptions
                        :border="true"
                        :column="1">
                        <el-descriptions-item label="离子风扇">
                            {{resultData.fanDetails}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        :border="true"
                        :column="1">
                        <el-descriptions-item label="台垫接地">
                            {{resultData.tdDetails}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        :border="true"
                        :column="1">
                        <el-descriptions-item label="ESD手环">
                            {{resultData.shDetails}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        :border="true"
                        :column="1">
                        <el-descriptions-item label="设备接地">
                            {{resultData.sbDetails}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <h2>异常数据统计分析</h2>
                    <el-descriptions
                        :border="true"
                        :column="2">
                        <el-descriptions-item label="异常持续总时长">
                            {{resultData.errorTime}}
                        </el-descriptions-item>
                        <el-descriptions-item label="异常时长占比">
                            {{resultData.errorTimeRate}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        :border="true"
                        :column="2">
                        <el-descriptions-item label="异常出现次数">
                            {{resultData.errorCount}}
                        </el-descriptions-item>
                        <el-descriptions-item label="异常次数占比">
                            {{resultData.errorCountRate}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-row>
                        <el-col :span="12">
                            <h3>异常次数前5的终端详情</h3>
                            <el-table :data="resultData.top5CountList">
                                <el-table-column prop="key" align="center" label="通道ID" width="200"></el-table-column>
                                <el-table-column prop="value" align="center" label="异常出现次数" width="200"></el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="12">
                            <h3>异常时长前5的终端详情</h3>
                            <el-table :data="resultData.top5TimeList">
                                <el-table-column prop="key" align="center" label="通道ID" width="200"></el-table-column>
                                <el-table-column prop="value" align="center" label="异常时长(秒)" width="200"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </template>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script src="/backend/plugins/js-file-download/file-download.js"></script>
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            searchObj: {
                line: null,
                timeScale: null
            },
            lines: [] ,
            resultData: null,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        },
        created() {
            axios.get("/line/listAll").then((res) => {
                this.lines = res.data.data;
            });
        },
        methods: {
            searchData(){
                if (this.searchObj.line === null || this.searchObj.line === ''){
                    this.$message.error('请先选择生产线！！');
                    return;
                }
                if (this.searchObj.timeScale === null){
                    this.$message.error('请先选择时间范围！！');
                    return;
                }
                $axios({
                    url: '/esdLogAdmin/searchData',
                    method: 'post',
                    data: this.searchObj
                }).then((res) => {
                    this.resultData = res.data;
                    this.$message.success(res.msg);
                })
            },
            exportData(){
                if (this.searchObj.line === null || this.searchObj.line === ''){
                    this.$message.error('请先选择生产线！！');
                    return;
                }
                if (this.searchObj.timeScale === null){
                    this.$message.error('请先选择时间范围！！');
                    return;
                }
                axios.post('/esdLogAdmin/exportData', this.searchObj, {responseType:'blob'}).then(res => {
                    if(res.status == 200){
                        // res.headers['content-disposition'].substring(20)表示从响应头中获取文件名
                        fileDownload(res.data,res.headers['content-disposition'].substring(20));
                    }else { // 下载文件失败，解析json格式信息
                        let that = this;
                        var fileReader = new FileReader();
                        fileReader.readAsText(res.data); // 按字节读取文件内容，结果为文件的二进制串
                        fileReader.onload = ()=>{
                            that.$notify.error(fileReader.result);
                        }
                    } 
                });
            }
        }
    })
</script>
</html>